<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 绝对定位的基本概念 */
        /* 绝对定位：盒子在浏览器中以坐标进行位置精准描述 */
        /* position:absolute; 一定要设坐标：top...不然无效*/
        /* 绝对定位脱离标准文档流，释放自己的位置，不影响其他元素，而是压盖*/
        /* 绝对定位又不占位又不影响别人，就像狗皮膏药广告！一样！ */
        /* 脱离标准文档流的方法：浮动，绝对定位，固定定位 */
        /* 绝对定位的行内元素照样可以设置宽高。 */
        
        /* 绝对定位的基点 */
        /* 绝对定位不是永远以浏览器作为基点 */
        /* 绝对定位的基点：离自己最近的 拥有定位属性（绝对定位）的 祖先盒子 的边框 【注意是边框，不看padding】*/
        /* 子绝父相！！！！！决定定位absolute通常以相对定位盒子relative（边框）做父亲（基准点）！！ */
        /* 当然，绝对定位也可以做绝对定位的父盒子 子绝父绝【不常用哦】*/

        /* 绝对定位的水平居中和垂直居中 */
        /* 盒子水平居中用margin aotu (绝对定位auto用不了！！！)*/
        /* 盒子垂直居中用绝对定位！！！ */
        /* 盒子垂直居中用了绝对定位，则盒子的水平居中也需要绝对定位的方法。 */
        /* 盒子垂直定位：position:absolute;top:50%;margin-top:-自己高度的一半  水平类似*/
        /* 绝对定位absolute没有办法用margin auto的原因，是因为绝对定位已经脱离标准文档流， auto失效 */

        /* 绝对定位的堆叠顺序z-index */
        /* Z-index属性是堆叠顺序属性，是一个没有单位的正整数，数值大的能够压住数值小的。 */
        /* 默认情况下,最后会出现的在上面。 */
        /* 设置了Z-index的情况下，谁的值大谁在上面。 */
        /* 注意z-index属性没有单位,是正整数。 */

        /* 绝对定位的用途 */
        /* ①绝对定位用来制作压盖，遮罩效果。 比如轮播图的左右按钮和下面的小圆点*/
        /* ②绝对定位用来结合css精灵使用。 */
        /* ③绝对定位可以结合JS实现动画。 */
        
        *{margin:0;padding:0;}
        div .box1{
            width: 200px;
            height: 200px;
            background: red;
        }
        div .box2{
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 0, 0.458);
            position:absolute;
            top:340px;
            left:400px;
        }
        div .box3{
            width: 200px;
            height: 200px;
            background:blue;
        }

        div.d1{
            border: 1px solid black;
            padding:100px;
            width:402px;
            height:402px;
            margin:10px auto;
            /* 这是离的远的可做父盒子的相对定位盒子 所以不用 */
            position: relative;

        }
        div.d2{
            border: 1px solid black;
            padding:100px;
            width:200px;
            height:200px;
            /* 这是离的近的可做父盒子的相对定位盒子 所以用 且忽视padding 直接靠边框 */
            position:relative;
        }
        div.d3{
            border: 1px solid black;
            padding:50px;
            width:98px;
            height:98px;
        }
        .d3 p{
            height: 50px;
            width: 50px;
            background-color:green;
            position: absolute;
            /* 绝对定位一定要设置坐标 不然不动，就在原来的位置。 */
            /* 这里可以看出，绝对定位的基准是父盒子的边框，不包含它的padding */
            top:0px;
            left:0;
        }

        div.chuizhi{
            width: 300px;
            height: 300px;
            padding: 50px;
            border: 1px solid #000;
            margin:10px auto;
            position:relative;
            /* 父盒子注意设置相对定位relative，才方便绝对定位子盒子的设置 */
        }
        div.chuizhi p{
            width: 100px;
            height: 100px;
            background-color: red;
            /* margin:0 auto;  【设置相对定位的元素,无法用margin auto实现水平居中。当不是相对定位的时候，可以用margin auto实现水平居中水平居中。】 */
            position:absolute;
            top:50%; /* 现在的高度，以父盒子边框为基准，自身顶部，在一半的位置。 即此时自己的顶部位于父盒子的中间线。*/
            margin-top:-50px; /* 自己把自己往上拉自己的一半。即现在自己的中间线是父盒子的中间线。 */
            /* margin-top:50px;会把自己往下再挤50px,偏离中间线更远 */

            /* 绝对定位实现水平居中 margin auto 失效，也要用left:50%,margin-left:自己长度的一半 */
            left:50%;  /* 使自己的左边和父盒子的中间线位于同一条线上。 */
            margin-left:-50px;  /* 把自己往左边拉自己一半。 */
        }
        

        div.z{
            width: 1000px;
            height: 1000px;
            position: relative;
            border: 1px solid #000;
            margin:10px auto;
        }
        div.z9999 {
            width: 300px;
            height: 300px;
            background-color:blue;
            position:absolute;
            top:0px;
            left:0px;
            z-index:9999;
        }
        div.z999 {
            width: 300px;
            height: 300px;
            background-color: red;
            position:absolute;
            top:110px;
            left:110px;
            z-index:999;
        }
    
    </style>
</head>
<body>
    <div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
        <p>绝对定位又不占位又不影响别人，就像广告！一样！绝对定位又不占位又不影响别人，就像广告！一样！</p>
    </div>

    <div class="d1">
        <div class="d2">
            <div class="d3">
                <p></p>
            </div>
        </div>
    </div>

    <div class="chuizhi">
        <p></p>
    </div>

    <div class="z">
        <div class="z9999"></div>
        <div class="z999"></div>
    </div>
</body>
</html>